@rem: 50rem;
html,body{
  min-height:100%;
}
.wrap{
  width: 100%;
  min-height: 100%;
  background: #21364f;
}
#wrapper_weatherConditions{
  width: 100%;
}
.forecastCharts{
  width: 100%;
  height: 480/@rem;
  position: relative;
  h5{
    width: 100%;
    height: 80/@rem;
    line-height: 100/@rem;
    color: #fff;
    font-size: 28/@rem;
    text-align: center;
  }
  .description{
      position: absolute;
      bottom: 120/@rem;
      left:80/@rem;
      li{
        height: 92/@rem;
        line-height: 92/@rem;
        font-size: 30/@rem;
        color: #ffffff;
      }
  }
}
.chartsWrap{
  width: 750/@rem;
  height: 400/@rem;
}
.hour{
  width: 100%;
  height: 350/@rem;
  margin-bottom: 20/@rem;
  background: #34495f;
  h4{
    width: 100%;
    padding: 0 24/@rem;
    height: 80/@rem;
    line-height: 80/@rem;
    color: #fff;
    font-size: 30/@rem;
    border-bottom: 1/@rem solid #5d6d7f;
  }
  .hourWrap{
    width:100%;
    height: 270/@rem;
    overflow-x: auto;
  }
}

#hourWrap{
  width:auto;
  height: 270/@rem;
  li{
    float: left;
    width: 125/@rem;
    height: 270/@rem;
    padding-top: 42/@rem;
    .time{
      width: 120/@rem;
      height: 40/@rem;
      line-height: 40/@rem;
      text-align: center;
      font-size: 24/@rem;
      color: #fff;
    }
    .weatherIcon{
      width: 120/@rem;
      height: 90/@rem;
      line-height: 90/@rem;
      font-size: 30/@rem;
      text-align: center;
      color: #fff;
      img{
        width: 120/@rem;
        height: 90/@rem;
        border: none;
      }
    }
    .temperature{
      width: 120/@rem;
      height: 40/@rem;
      line-height: 40/@rem;
      text-align: center;
      font-size: 24/@rem;
      color: #fff;
    }
  }
}
.bottom{
  width: 100%;
  height: auto;
  h5{
    width: 100%;
    height: 81/@rem;
    padding-left: 24/@rem;
    border-bottom: 1/@rem solid #5b6b7c;
    line-height: 80/@rem;
    font-size: 28/@rem;
    color: #fff;
    background: #34495f;
  }
  .weekWrap{
    width: 100%;
    height: auto;
    .weekList{
      width: 100%;
      min-height: 142/@rem;
      li{
        width: 100%;
        min-height: 142/@rem;
        border-bottom: 2/@rem solid #21364f;
        .listTitle{
          width: 100%;
          height: 140/@rem;
          background: #34495f;
          .listIcon{
            float: left;
            width: 105/@rem;
            height: 140/@rem;
          }
          .listTime{
            float: left;
            width: 270/@rem;
            height: 140/@rem;
            padding-top: 30/@rem;
            p{
              width: 100%;
              color: #fff;
              font-size: 30/@rem;
              height: 30/@rem;
              line-height: 30/@rem;
              margin-bottom: 26/@rem;
            }
            p:last-child{
              font-size: 26/@rem;
              height: 26/@rem;
              line-height: 26/@rem;
            }
          }
          .listTemp{
            float: left;
            width: 185/@rem;
            height: 140/@rem;
            padding-top: 30/@rem;
            p{
              width: 100%;
              height: 82/@rem;
              line-height: 82/@rem;
              color: #fff;
              font-size: 28/@rem;
            }
          }
          .listShidu{
            float: left;
            width: 120/@rem;
            height: 140/@rem;
            padding-top: 30/@rem;
            p{
              width: 100%;
              height: 82/@rem;
              line-height: 82/@rem;
              color: #fff;
              font-size: 28/@rem;
            }
          }
          .listUp,.listDown{
            float: right;
            width: 30/@rem;
            height: 140/@rem;
            margin-right: 24/@rem;
            padding-top: 30/@rem;
            span{
              display: block;
              width: 30/@rem;
              height: 28/@rem;
              line-height: 28/@rem;
              font-size: 30/@rem;
              color: #fff;
            }
          }
        }
        .listBody{
          display: none;
          width: 100%;
          height: 476/@rem;
          padding: 25/@rem 0 25/@rem 100/@rem;
          p{
            width: 600/@rem;
            height: 60/@rem;
            line-height: 60/@rem;
            color: #fff;
            font-size: 28/@rem;
          }
        }
      }
      .listActive{
        .listTitle{

        }
        .listBody{
          display: block;
        }
      }
    }
  }
}
.details_weatherConditions{
  padding: 0 150/@rem;
  .item_weatherConditions:last-child{
    .line_weatherConditions{
      display: none;
    }
  }
}